<template>

	<div style="width: 1100px;">

		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{  path: '/adminHome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item><a href="/adminHome">业务管理</a></el-breadcrumb-item>
			<el-breadcrumb-item>订单管理</el-breadcrumb-item>
		</el-breadcrumb>

		<el-card class="box-card" style="width: 1200px; margin-top: 1.875rem; margin-right: -100px;">
			<div style="float: left; margin-top:1.875rem ;">
				<el-input type="txte" v-model="queryInfo.username" placeholder="请输入订单号"
					style="width: 200px;height: 50px;"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="queryAll">查询</el-button>
			</div>


			<el-table :data="tableData" border style="width: 100%">

				<el-table-column prop="orderId" label="订单编号">
				</el-table-column>
				<el-table-column prop="orderNumber" label="订单数量" style="width: 1.25rem;">
				</el-table-column>
				<el-table-column prop="address" label="发货地址">
				</el-table-column>
				<el-table-column prop="dphone" label="手机号">
				</el-table-column>
				<el-table-column prop="dText" label="订单备注">
				</el-table-column>
				</el-table-column>
				<el-table-column prop="isPay" label="是否付款">
					<template slot-scope="scope">
						<span v-if="scope.row.isPay==0">未付款</span>
						<span v-if="scope.row.isPay==1">已付款</span>
					</template>
				</el-table-column>

				<el-table-column prop="isStatus" label="状态">
					<template slot-scope="scope">
						<span v-if="scope.row.isStatus==0">进行中</span>
						<span v-if="scope.row.isStatus==1">完成</span>
						<span v-if="scope.row.isStatus==2">失败</span>
					</template>
				</el-table-column>

				<el-table-column label="操作" width="300px">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="dark" content="项目信息" placement="top-start">
							<el-button type="success" icon="el-icon-s-promotion" @click="queryXM(scope.row.pId)">
							</el-button>
						</el-tooltip>

						<el-tooltip class="item" effect="dark" content="回报信息" placement="top-start">
							<el-button type="success" icon="el-icon-s-cooperation" @click="queryHB(scope.row.retuId)">
							</el-button>
						</el-tooltip>

						<el-tooltip class="item" effect="dark" content="用户信息" placement="top-start">
							<el-button type="success" icon="el-icon-user" @click="queryYH(scope.row.userId)">
							</el-button>
						</el-tooltip>
					</template>

				</el-table-column>
			</el-table>


			<!-- 分页 -->

			<el-pagination @current-change="handleCurrentChange" :current-page="queryInfo.pageNum"
				:page-sizes="[1, 4, 8, 10]" :page-size="3" layout="total, prev, pager, next, jumper" :total="total">
			</el-pagination>


		</el-card>
		<!-- 项目信息弹窗 -->
		<el-dialog title="项目信息" :visible.sync="xmdvisible">
			<el-table :data="xm" border style="width: 100%">
				<el-table-column prop="projectId" label="项目ID">
				</el-table-column>
				<el-table-column prop="projectName" label="项目名称">
					
				</el-table-column>
				<el-table-column prop="projectMessage" label="项目简介">
				</el-table-column>
				<el-table-column prop="projectAllMoney" label="筹备金额">
				</el-table-column>
				<el-table-column prop="projectEndTime" label="结束时间">
				</el-table-column>
				</el-table-column>
				<el-table-column prop="zfbNumber" label="支付宝账号">			
				</el-table-column>			
				<el-table-column prop="istg" label="状态">
					<template slot-scope="scope">
						<span v-if="scope.row.istg==1">审核中</span>
						<span v-if="scope.row.istg==2">审核成功</span>
						<span v-if="scope.row.istg==3">审核失败</span>
						<span v-if="scope.row.istg==4">总凑中</span>
						<span v-if="scope.row.istg==5">总凑失败</span>
						<span v-if="scope.row.istg==6">总凑成功</span>
					</template>
				</el-table-column>		
			</el-table>			
			<div slot="footer" class="dialog-footer">
				<el-button @click="resetForm()">确定</el-button>
			</div>
		</el-dialog>
		<!-- 回报信息弹框 -->
		<el-dialog title="回报信息" :visible.sync="hbdvisible">
			<el-table :data="hb" border style="width: 100%">			
				<el-table-column prop="retuId" label="回报ID">
				</el-table-column>
				<el-table-column prop="retuType" label="回报类型">
					<template slot-scope="scope">
						<span v-if="scope.row.retuType==0">线上</span>
						<span v-if="scope.row.retuType==1">实物</span>
					</template>
				</el-table-column>
				<el-table-column prop="payMoney" label="支付金额">
				</el-table-column>
				<el-table-column prop="retuText" label="回报内容">
				</el-table-column>
				<el-table-column prop="img" label="图片">
					<template slot-scope="scope">
						<el-image style="width: 50px; height: 50px"
							:src="'http://localhost:8080/vueload?filename='+scope.row.img" :fit="fit">
						</el-image>
					</template>
				</el-table-column>
				</el-table-column>
				<el-table-column prop="retuNumber" label="回报数量">			
				</el-table-column>			
				<el-table-column prop="retuTime" label="回报时间">
				</el-table-column>
				<el-table-column prop="isEmail" label="邮费">
				</el-table-column>			
			</el-table>			
			<div slot="footer" class="dialog-footer">
				<el-button @click="resetForm()">确定</el-button>
			</div>
		</el-dialog>
		<!-- 用户信息弹框 -->
		<el-dialog title="用户信息" :visible.sync="yhdvisible">
			<el-table :data="yh" border style="width: 100%">
				<el-table-column prop="userId" label="用户编号">
				</el-table-column>
				<el-table-column prop="name" label="用户名">
				</el-table-column>
				<el-table-column prop="phone" label="电话">
				</el-table-column>
				<el-table-column prop="touXiang" label="头像">
					<template slot-scope="scope">
						<el-image style="width: 50px; height: 50px"
							:src="'http://localhost:8080/vueload?filename='+scope.row.touXiang" :fit="fit">
						</el-image>
					</template>
				</el-table-column>
				
				</el-table-column>
				<el-table-column prop="email" label="邮箱">			
				</el-table-column>					
			</el-table>			
			<div slot="footer" class="dialog-footer">
				<el-button @click="resetForm()">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				tableData: [],
				queryInfo: {
					pageNum: 1,
					username: '',
					total: 0
				},
				hbdvisible: false,
				xmdvisible: false,
				yhdvisible: false,
				xm: [],
				yh: [],
				hb: []

			}
		},
		methods: {
			
			//确定
			resetForm(){
				this.hbdvisible=false
				this.xmdvisible=false
				this.yhdvisible=false
			},
			//查询项目
			async queryXM(id) {

				var res = await this.$http.get('selectProjectByProjectId?projectId=' + id)
				this.xm = res.data.data
				this.xmdvisible = true
			},
			//查询回报
			async queryHB(id) {
				
				var res = await this.$http.get('selectRetuTableByRId?retuId='+ id)
				this.hb = res.data.data
				console.log(this.hb)
				this.hbdvisible = true
			},
			//查询用户
			async queryYH(id) {
				var res = await this.$http.get('queryUserByUserId?userId=' + id)
				this.yh = res.data.data
				this.yhdvisible = true
			},
			//查询全部
			async queryAll() {

				var param = new URLSearchParams();
				param.append('pageNum', this.queryInfo.pageNum)
				param.append('orderId', this.queryInfo.username)
				var res = await this.$http.post('selectAllOrder', param)
				this.tableData = res.data.data.list
				this.total = res.data.data.total
			},
			// 页码大小
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			// 页码变动
			handleCurrentChange(val) {
				this.queryInfo.pageNum = val;
				this.queryAll();
			}

		},
		async mounted() {
			this.queryAll()

		}
	}
</script>

<style>
</style>
